<template>
	<view id="goodDetail" v-show="detail.id">
		<!-- 轮播图 -->
		<view class="detail-banner">
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="300" @change="changeCurrent">
				<swiper-item v-for="(item,index) in detail.gallery" :key="index">
					<image class="swiper-item" :src="IMG_URL+item.img" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="dots">{{current}}/{{detail.gallery.length}}</view>
		</view>
		<!-- 商品名称 -->
		<view class="detail-name">
			<text>{{detail.name}}</text>
			<view class="detail-share" @tap="bindShare">
				<icon class="icon-share"></icon>
				<!-- <button open-type="share"></button> -->
			</view>
		</view>
		<view style="height: 16rpx;background-color: #F5F5F5;"></view>
		<!-- 价格信息 -->
		<view class="detail-padding">
			<view class="detail-price-box">
				<text>¥{{detail.price}}</text>
				<text class="market_price" v-if="detail.market_price">¥{{detail.market_price}}</text>
				<!-- 会员价 -->
				<text class="membership-price">咪粉价¥{{detail.sku_vprice}}</text>
			</view>
			<view class="detail-padding-flex">
				<!-- <text>运费 ¥{33.20}</text> -->
				<text>已售 {{detail.sold}}件</text>
				<text>浏览 {{detail.view}}次</text>
			</view>
		</view>
		<view style="height: 16rpx;background-color: #F5F5F5;"></view>
		<!-- 商品详情和相关评论tab -->
		<view class="detail-content">
			<!-- tab -->
			<view class="detail-content-tab">
				<view class="detail-content-tab-item" :class="{'detail-content-tab-item-active' :navIndex===i}" v-for="(item,i) in navItems"
				 :key="index" @click="navClick(i)">{{item}}</view>
			</view>
			<!-- 商品详情 -->
			<view class="detail-content-wenz" v-if="navIndex===0">
				<image v-for="item in detail.detail_img" :key="item.id" :src="IMG_URL+item.img" mode="widthFix"></image>
			</view>
			<!-- 相关评论 -->
			<view class="detail-content-comment" v-else>
				<view class="detail-content-comments-items" v-for="(item,index) in detail.comment" :key="index">
					<image :src="item.headimgurl" class="grace-comments-face"></image>
					<view class="grace-comments-body">
						<view class="grace-comments-header">
							<text class="grace-comments-header-text">{{ item.nickname }}</text>
							<text class="grace-comments-info-text">{{ item.time }}</text>
						</view>
						<view class="grace-comments-content">{{ item.content }}</view>
						<view class="grace-comments-imgs" v-if="item.imgs">
							<view class="grace-comments-image" v-for="(img, indexImg) in item.imgs" :key="indexImg">
								<image :src="img" mode="widthFix" class="grace-comments-img" @click.stop="showImgs(index, indexImg)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<view style="height: 140rpx;"></view>
		<view class="detail-bottom">
			<uni-goods-nav :fill="true" :options="bottomOptions" :buttonGroup="buttonGroup" @click="onOption" @buttonClick="buttonClick"
			 style="width: 100%;" />
		</view>
		<!-- 分享弹出框 -->
		<uni-popup ref="sharePopup" type="bottom">
			<view class="share-popup">
				<button open-type="share" class="share-btn">发送给朋友</button>
				<button class="poster-canvas" @tap="bindPoster">生成海报</button>
				<button class="share-close" @tap="bindCloseShare">取消</button>
			</view>
		</uni-popup>
		<!-- 立即购买|加入购物车 弹出层 -->
		<uni-popup ref="popup" type="bottom">
			<view class="buy-popup-box">
				<icon class="icon-close" @tap="closePop"></icon>
				<view class="goods-message">
					<image class="goods-message-img" v-if="detail.img" :src="IMG_URL+detail.img" mode="aspectFit"></image>
					<view class="goods-message-right">
						<view class="goods-message-price">
							<text>¥{{sku.sku_price}}</text>
							<text>咪粉价：¥{{sku.sku_vprice}}</text>
						</view>
					</view>
				</view>
				<scroll-view scroll-y="true" class="scroll-popup" style="height:700rpx;">
					<view class="scroll-popup-title">规格</view>
					<view class="specifications-list">
						<view class="specifications-item" :class="{'specifications-item-active':colorSelected===index }" v-for="(item,index) in detail.sku" :key="index" @click="selectSpecif(item,index)">{{item.sku_name}}</view>
					</view>
					<view class="scroll-popup-title">购买数量</view>
					<uni-number-box :min="1" @change="bindChangeNum"></uni-number-box>
				</scroll-view>
				<button class="scroll-popup-btn" @click="buyOrCar">{{type==0 ? '加入购物车' : '立即购买'}}</button>
			</view>
		</uni-popup>
		<!-- 生成海报 -->
		<view class="poster-box" v-show="isposter">
			<!-- 遮罩层 -->
			<view class="floating_layer" @click="closePoster"></view>
			<view class="poster-content">
				<!-- <icon class="icon-close"></icon> -->
				<view class="canvas" id="myCanvas">
					<canvas canvas-id="canvas1" :disable-scroll="true"></canvas>
				</view>
				<!-- <button type="default">保存图片</button> -->
			</view>
			<view class="save-poster" @click="saveCanvas">
				<icon class="icon-save"></icon>
				<text>保存图片</text>
			</view>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	import {
		goodsDetail,
		addCart,
		collect,
		offCollect,
		qrcode,
		backCode
	} from '@/api/index.js'
	import {
		login
	} from '@/api/login.js'
	import {
		formatTime
	} from '@/util/time.js'
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import { accMul, accAdd, Subtr } from '../../util/precision.js'
	export default {
		components: {
			uniPopup,
			uniGoodsNav,
			uniNumberBox
		},
		data() {
			return {
				openid: '',
				userInfo: {}, //用户信息
				IMG_URL: app.globalData.IMG_URL, //图片前缀
				id: "", //商品id
				sku:{}, //选择的规格
				detail: {}, //详情数据
				type: 0, //0加入购物车 1立即购买
				buyNum: 1,
				bottomOptions: [{
					icon: 'shop',
					text: '首页',
					color: '#646566'
				}, {
					icon: 'cart',
					text: '购物车',
					color: '#646566'
				}, {
					icon: 'heart-filled',
					text: '收藏',
					color: '#646566'
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#FF7900',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#FF6666',
						color: '#fff'
					}
				],
				navItems: ['商品详情', '相关评论'],
				navIndex: 0,
				headimgurl: '', //头像
				canvansBg: '', //海报背景图
				shopImg: '', //海报商品图片
				qrCodeImg: '', //二维码
				poster: '',
				isposter: false, //是否显示
				current: 1, //当前轮播索引
				colorSelected:0, //当前选中的规格
			};
		},
		onReady() {
		},
		onLoad: function(options) {
			// 通过小程序扫码进入
			console.log(options.scene)
			this.openid = uni.getStorageSync('openid');
			if (options.scene) {
				const scene = decodeURIComponent(options.scene);
				this.backCode(scene);
				console.log(scene);
			} else {
				this.id = options.id;
				this.goodsDetail();
			}			
		},
		onShow() {
			this.openid = uni.getStorageSync('openid');
			this.goodsDetail();
			// this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
		},
		computed: {
			allPrice() {
				if(this.detail.if_vip == 1){
					// 会员价
					return accMul(Number(this.sku.sku_vprice), Number(this.buyNum))
				}else{
					// 原价
					return accMul(Number(this.sku.sku_price), Number(this.buyNum))
				}
			},
		},
		// 转发
		onShareAppMessage: function(res) {
			return {
				title: this.detail.name,
				path: `/pageA/goodDetail/goodDetail?id=${this.id}`
			}
		},
		methods: {
			// 选择规格
			selectSpecif:function(item,index){
				this.colorSelected=index;
				this.sku=item;
				this.detail.price=item.sku_price
				console.log(item)
			},
			
			test: function() {
				uni.saveImageToPhotosAlbum({
					filePath: this.poster,
					success(e) {
						console.log(e)
					}
				})
				// this.isposter=false; //是否显示
			},
			// 初始化数据
			goodsDetail: function() {
				goodsDetail({
					id: this.id,
					openid: this.openid
				}).then(res => {
					// 转时间戳
					if (res.comment.length) {
						res.comment.forEach((obj, i) => {
							obj.time = formatTime(obj.time)
						})
					}
					//是否收藏
					this.bottomOptions[2].color = res.if_collect == 1 ? 'red' : '#646566'
					this.detail = res;
					this.sku=res.sku[0]
					console.log(res)
				})
			},

			// 通过小程序码id获取secen id
			backCode: function(id) {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						// 获取openid
						login({
							jscode: loginRes.code,
						}).then(res => {
							backCode({
								id: id,
								openid: res.openid
							}).then(res => {
								this.id=res;
								this.goodsDetail();
								console.log(res)
							})
							console.log(res)
						})
					}
				});
			},

			// 轮播图改变
			changeCurrent: function(e) {
				this.current = e.detail.current + 1
			},

			// tab选择
			navClick: function(index) {
				this.navIndex = index
			},

			// 回到首页、购物车
			onOption: function(e) {
				if (e.index === 0) {
					uni.switchTab({
						url: `/pages/index/index`
					})
				} else if (e.index === 1) {
					uni.switchTab({
						url: `/pages/car/car`
					})
				} else {
					if (!app.userIdentity()) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						return false;
					}
					let params = {
						'openid': this.openid,
						'goods_id': this.id
					}
					if (this.detail.if_collect == 1) {
						offCollect(params).then(res => {
							uni.showToast({
								title: '已取消收藏',
								duration: 1000
							});
							this.bottomOptions[2].color = '#646566'
							// this.bottomOptions[2].color=if_collect==1 ? 'red' : '#646566'
						})
					} else {
						collect(params).then(res => {
							uni.showToast({
								title: '收藏成功',
								duration: 1000
							});
							this.bottomOptions[2].color = 'red'
						})
					}
				}
			},

			// 立即购买、加入购物车
			buttonClick: function(e) {
				if (!app.userIdentity()) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return false;
				}
				this.type = e.index
				this.$refs.popup.open()
				console.log(e)
			},

			// 选择数量
			bindChangeNum: function(val) {
				this.buyNum = parseInt(val)
			},

			// 关闭选择
			closePop: function() {
				this.$refs.popup.close()
			},

			// 加入购物车或者购买
			buyOrCar: function() {
				if (this.type == 0) { //加入购物车
					addCart({
						openid: this.openid,
						goods_id: this.id,
						goods_num: this.buyNum,
						sku_id:this.sku.id
					}).then(res => {
						uni.showToast({
							title: '添加成功!',
							duration: 1000
						})
						this.$refs.popup.close()
					})
				} else { //立即购买
					let buyGoodsMsg = {};
					let arrShop = [{
						'goods_id': this.detail.id,
						'goods_price': this.detail.price,
						'goods_num': this.buyNum,
						'goods_name': this.detail.name,
						'goods_img': this.detail.img,
						'sku_vprice': this.detail.sku_vprice,
						'sku':this.sku,
						'if_vip':this.detail.if_vip
					}];
					buyGoodsMsg['goods_arr'] = arrShop;
					buyGoodsMsg['price'] = this.allPrice;
					app.globalData.buyGoodsMsg = buyGoodsMsg;
					uni.navigateTo({
						url: '/pageA/pay/pay'
					})
				}
			},

			// 分享
			bindShare: function() {
				if (!app.userIdentity()) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return false;
				}
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				this.$refs.sharePopup.open()
			},

			// 取消分享
			bindCloseShare: function() {
				this.$refs.sharePopup.close()
			},

			// 生成海报
			bindPoster: function() {
				this.bindCloseShare() //关闭
				this.isposter = true;
				uni.showLoading({
					title: '正在生成',
					mask: true
				});
				// 验证生成海报图片有没有全部生成
				if (this.canvansBg == "") {
					this.getCanvansBg();
					return false
				}
				if (this.shopImg == "") {
					this.getShopImg();
					return false
				}
				if (this.headimgurl == "") {
					this.getHeadimgurl();
					return false
				}
				if (this.qrCodeImg == "") {
					this.qrcode();
					return false;
				}

				let canvansX = 19.5;
				let ctx = uni.createCanvasContext('canvas1');
				// 头像
				ctx.drawImage(this.canvansBg, 0, 0, 343, 476) //背景图片
				// ctx.setStrokeStyle('#000000')
				// ctx.setLineWidth(3)
				// ctx.strokeRect(canvansX, 18, 304, 250)  //商品图片边框
				ctx.drawImage(this.shopImg, canvansX + 3, 18 + 3, 304 - 6, 250 - 6) //商品图片
				ctx.setFontSize(19)
				// ctx.font = 'normal bold 18px sans-serif';
				ctx.setFillStyle('#333333')
				ctx.fillText(this.detail.name.length < 16 ? this.detail.name : this.detail.name.substring(0, 15) + '...', canvansX,
					296) //商品名称
				ctx.setFontSize(14)
				ctx.setFillStyle('#F6240C')
				ctx.fillText('¥', canvansX, 328)
				ctx.setFontSize(21)
				ctx.setFillStyle('#F6240C')
				ctx.fillText(this.detail.price, 30, 328) //现价  
				if (this.detail.market_price) {
					ctx.setFontSize(14)
					ctx.setFillStyle('#FFFFFF')
					ctx.fillText('¥' + this.detail.market_price, 30 + this.detail.price.length * 16, 326) //原价 
					ctx.setFillStyle('#FFFFFF')
					ctx.fillRect(30 + this.detail.price.length * 16, 320, (this.detail.market_price.length + 1) * 8, 1)
				}
				// ctx.strokeStyle = "#FFFFFF";
				// ctx.moveTo(30 + this.detail.price.length * 16, 322)
				// ctx.lineTo(30 + (this.detail.price.length + this.detail.market_price.length - 2) * 16, 322) //删除线
				ctx.stroke()
				ctx.save();
				ctx.beginPath()
				ctx.arc(18 + canvansX, 18 + 336, 18, 0, 2 * Math.PI, false)
				ctx.clip()
				ctx.drawImage(this.headimgurl, canvansX, 336, 36, 36) //头像
				ctx.restore();
				ctx.setFontSize(12)
				ctx.setFillStyle('#666666')
				ctx.fillText(this.userInfo.nickname, 50 + canvansX, 358) //昵称
				ctx.setFontSize(26)
				ctx.setFillStyle('#333333')
				ctx.fillText('Naber Cat', canvansX, 425) //小程序名字
				ctx.setFontSize(13)
				ctx.setFillStyle('#666666')
				ctx.fillText('邻 家 的 猫   更 放 心', canvansX, 450) //店铺介绍
				ctx.setFontSize(12)
				ctx.setFillStyle('#CCCCCC')
				ctx.fillText('长按小程序码', 180, 425) //说明
				ctx.setFontSize(12)
				ctx.setFillStyle('#CCCCCC')
				ctx.fillText('查看商品详情', 180, 445) //说明
				ctx.drawImage(this.qrCodeImg, 267, 397, 70, 70) //背景图片
				ctx.draw();
				setTimeout(() => {
					//下面的13以及减26推测是因为在写样式的时候写了固定的zoom: 50%而没有用像素比缩放导致的黑边，所以在生成时进行了适当的缩小生成，这个大家可以自行尝试
					uni.canvasToTempFilePath({
						canvasId: 'canvas1',
						x: 0,
						y: 0,
						width: 1500,
						height: 2082,
						destWidth: 1500,
						destHeight: 2082,
						success: (res) => {
							uni.hideLoading();
							this.poster = res.tempFilePath
						}
					})
				}, 200)
			},

			// 关闭遮罩层
			closePoster: function() {
				this.isposter = false; //是否显示
			},

			// 获取二维码
			qrcode: function() {
				qrcode({
					openid: this.openid,
					goods_id: this.id
				}).then(res => {
					uni.getImageInfo({
						src: `${res}`,
						success: (image) => {
							this.qrCodeImg = image.path;
							this.bindPoster();
						}
					})
					console.log(res)
				})
			},

			// 获取头像（画布）
			getHeadimgurl: function() {
				uni.getImageInfo({
					src: this.userInfo.headimgurl,
					success: (image) => {
						this.headimgurl = image.path;
						this.bindPoster();
					}
				})
			},

			// 获取背景图片（画布）
			getCanvansBg: function() {
				uni.getImageInfo({
					src: `${this.IMG_URL}acat-xcx/canvan-bg.png`,
					success: (image) => {
						this.canvansBg = image.path;
						this.bindPoster();
					}
				})
			},

			// 获取商品图片（画布）
			getShopImg: function() {
				uni.getImageInfo({
					src: `${this.IMG_URL+this.detail.img}`,
					success: (image) => {
						this.shopImg = image.path;
						this.bindPoster();
					}
				})
			},

			// 保存图片
			saveImageToPhotosAlbum: function() {
				uni.saveImageToPhotosAlbum({
					filePath: this.poster,
					success: (e) => {
						this.isposter = false;
						uni.showToast({
							title: '保存成功',
							duration: 2000
						});
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},

			// 保存海报
			saveCanvas: function() {
				// this.saveImageToPhotosAlbum();
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum();
								},
								fail: () => {
									uni.showModal({
										title: '提示',
										content: '检测到您没打开相册授权，是否去设置打开？',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: () => {
														this.saveImageToPhotosAlbum();
													}
												});
											}
										}
									})
								}
							})
						} else {
							this.saveImageToPhotosAlbum();
						}
					}
				})
			},
		},
	};
</script>
<style lang="scss" scoped>
	@mixin absoluteT {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.poster-box {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.save-poster {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 108rpx;
			background: #FFFFFF;
			color: #666666;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.icon-save {
				width: 50rpx;
				height: 40rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/save-canvas.png) no-repeat;
				background-size: cover;
				margin-bottom: 7rpx;
			}
		}

		.floating_layer {
			width: 100%;
			height: 100%;
			background: #000000;
			opacity: 0.2;
		}

		.poster-content {
			position: absolute;
			top: 108rpx;
			left: 50%;
			transform: translateX(-50%);

			.canvas {
				width: 343px;
				height: 476px;
				background: #FFFFFF;
				border-radius: 10rpx;
				overflow: hidden;

				&>canvas {
					width: 343px;
					height: 476px;
					@include absoluteT();
				}
			}
		}
	}


	@mixin flexAlign {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#goodDetail {
		.detail-banner {
			width: 100%;
			height: 750rpx;
			position: relative;

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;
				}
			}

			.dots {
				font-size: 24rpx;
				position: absolute;
				right: 30rpx;
				bottom: 30rpx;
				padding: 0 20rpx;
				height: 40rpx;
				border-radius: 30rpx;
				line-height: 40rpx;
				text-align: center;
				color: #FFFFFF;
				background: rgba(0, 0, 0, 0.5);
			}
		}

		.detail-name {
			padding: 18rpx 32rpx;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			// margin-bottom: 20rpx;

			&>text {
				font-size: 32rpx;
				font-weight: 700;
				line-height: 40rpx;
				flex: 1;
			}

			.detail-share {
				position: relative;
				padding-left: 80rpx;

				.icon-share {
					width: 40rpx;
					height: 40rpx;
					background: url(../../static/images/icon-share.png) no-repeat;
					background-size: cover;
				}

				&>button {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
					z-index: 99;
				}
			}
		}

		.detail-padding {
			padding: 18rpx 32rpx;
			background: #FFFFFF;
			color: #B0B0B0;
			font-size: 22rpx;
			// margin-bottom: 30rpx;

			.detail-price-box {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				&>text:nth-of-type(1) {
					color: #F6240C;
					font-size: 32rpx;
					font-weight: 700;
					margin-right: 15rpx;
				}

				.detail-price-box {
					color: #A0A0A0;
					font-size: 26rpx;
					text-decoration: line-through;
					margin-right: 15rpx;
				}
				.membership-price{
					color: #FFC102;;
					font-size: 26rpx;
				}
			}

			.detail-padding-flex {
				@include flexAlign();
			}
		}

		.detail-content {
			padding: 48rpx 32rpx;
			background: #FFFFFF;

			.detail-content-tab {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-bottom: 36rpx;

				.detail-content-tab-item {
					font-size: 28rpx;

					&:nth-of-type(1) {
						margin-right: 100rpx;
					}
				}

				.detail-content-tab-item-active {
					position: relative;
					color: #FF7900;
					font-weight: 700;

					&::before {
						content: "";
						width: 150%;
						height: 4rpx;
						background: #FF7900;
						position: absolute;
						bottom: -20rpx;
						left: 50%;
						transform: translateX(-50%);
						animation: gradient .5s;
					}
				}
			}

			.detail-content-wenz {
				width: 100%;
				height: auto;

				&>image {
					display: block;
					// margin-top: 20rpx;
					width: 100%;
					// height: auto;
					// display: block;
				}
			}

			.detail-content-comments-items {
				display: flex;
				margin-bottom: 30rpx;

				.grace-comments-face {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.grace-comments-body {
					flex: 1;

					.grace-comments-header {
						@include flexAlign();
						font-size: 26rpx;
						margin-bottom: 8rpx;

						.grace-comments-info-text {
							font-size: 24rpx;
							color: #A0A0A0;
						}
					}

					.grace-comments-content {
						font-size: 24rpx;
						color: #555555;
					}

					.grace-comments-imgs {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						margin: 8rpx 0;
					}

					.grace-comments-image {
						width: 190rpx;
						height: 138rpx;
						margin: 5rpx;
						font-size: 0;
						overflow: hidden;
					}

					.grace-comments-img {
						width: 190rpx;
						height: 138rpx;
						border-radius: 3rpx;
					}
				}
			}
		}
	}

	.detail-bottom {
		// padding:28rpx 32rpx;
		padding: 10rpx 0;
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.buy-popup-box {
		padding: 70rpx 32rpx 16rpx;
		background: #FFFFFF;
		position: relative;

		.icon-close {
			width: 40rpx;
			height: 40rpx;
			background: url(../../static/images/pop-close.png) no-repeat;
			background-size: cover;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}

		.goods-message {
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #D8D8D8;

			.goods-message-img {
				width: 120rpx;
				height: 120rpx;
				margin-right: 16rpx;
			}

			.goods-message-right {
				.goods-message-price{
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					&>text {
						display: block;
					}
					&>text:nth-of-type(1) {
						font-size: 30rpx;
						font-weight: 600;
						color: #F6240C;
						margin-right: 20rpx;
					}
					&>text:nth-of-type(2) {
						font-size: 24rpx;
						color: #FFC102;
					}
				}
			}
		}

		.scroll-popup {
			font-size: 26rpx;

			.scroll-popup-title {
				margin: 30rpx 0 8rpx;
			}

			.specifications-list {
				display: flex;
				flex-wrap: wrap;

				.specifications-item {
					margin: 0 20rpx 20rpx 0;
					height: 60rpx;
					padding: 0 20rpx;
					text-align: center;
					line-height: 60rpx;
					background: #F0F0F0;
					border-radius: 10rpx;
				}

				.specifications-item-active {
					background: #FF0033;
					color: #FFFFFF;
				}
			}
		}

		.scroll-popup-btn {
			margin-top: 30rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #ff0033;
			color: #FFFFFF;
		}
	}

	@keyframes gradient {
		0% {
			width: 0;
		}

		100% {
			width: 150%;
		}
	}

	.share-popup {
		background: #F5F5F5;

		&>button {
			border-radius: 0;
			font-size: 32rpx;
			height: 110rpx;
			line-height: 110rpx;
		}

		.share-btn {
			border-bottom: 4rpx solid #F5F5F5;
		}

		.share-close {
			margin-top: 20rpx;
		}
	}
</style>
